<template>
	<view class="container">
		
		<view class="orderList">
			<view class="orderItem" v-for="item in orderList" :key="item.id">
				<view class="orderStatus">
					<view class="order_no">
						No.{{item.order_no}}
					<text class="copy" @click.stop="onCopy(item.order_no)">复制</text>
					</view>
				</view>
				<view class="goodsBox">
					<view class="goods_img">
						<image :src="item.exchange.image.file_url"
							mode="widthFix"></image>
					</view>
					<view class="goods_info">
						<!-- <view class="hd_title">{{item.exchange.title}}</view>
						<view class="order_price">
							<text class="hd_price">积分：{{item.goods_price}}</text>
							<text class="num">x{{item.num}}</text>
						</view>	 -->
						<view class="goods_title u-line-2">{{item.exchange.title}}</view>
						<view class="goods_norms u-line-1">数量：{{item.num}};{{item.goods_attr}}</view>
						<view class="price_box">
							<view>
								<u-tag border-color="#20cbd4" bg-color="#20cbd4" 
								color="#fff" :text="item.statit" 
								shape="circle" />
							</view>
						</view>				
						
					</view>
					
				</view>	
				<view class="footer">
					<view class="footer_info">
						<view>运费：{{item.express_price}}</view>
						<view>实付积分：{{item.pay_price}}</view>
					</view>
				</view>
				<view class="btn_part" >
					<u-button v-if="item.status>1" :custom-style="{marginLeft:'10rpx'}" size="mini" @click.stop="logistics(item.id)">查看物流</u-button>
					<u-button :custom-style="{marginLeft:'10rpx'}" size="mini" @click.stop="getAddress(item)">收货地址</u-button>
				</view>
			</view>
		</view>
	
		
		
		<login-model ref="loginModel"></login-model>
		<u-modal v-model="modalShow" :show-cancel-button="false" title="收货地址"
			:cancel-style="{color:'#909399'}">
			<view class="slot-content">
				<view class="payTime">

					{{address}}
				</view>
			
				
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {
		orderPay,
		orderPayZfb,
		orderPayGzh,
		orderPayh5,
		hjWxOrderPay,
		wxminiGetOpenid,
		exchangeOrderList,
		presellCreateOrder
	} from "@/common/api.js";
	export default {
		components: {
			empty,
			loginModel,
			hoverMenu
		},
		data() {
			return {
				modalShow:false,
				payPwdShow:false,
				payPassword:'',
				pay_price:0,
				order_id: 0,
				payType:"yue",
				pageStart: 1,
				orderList: [],
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				modalShow:false,
				address:'',
			};
		},
		onShow() {
			this.selectOrder()
		},
		onReachBottom() {},
		methods: {
			scrolltolower(){
				if(this.total/(this.pageStart*this.pageSize)>1){
					this.pageStart++;
					this.selectOrder();
				}else{
					this.status = 'nomore';
				}
			},
			selectOrder() {
				exchangeOrderList(this, {
					page: 1
				})
			},
			onCopy(value){ //复制订单号
				// #ifdef H5
				var input = document.createElement('input'); // 直接构建input
				input.value = value; // 设置内容
				document.body.appendChild(input); // 添加临时实例
				input.select(); // 选择实例内容
				document.execCommand('Copy'); // 执行复制
				document.body.removeChild(input); // 删除临时实例
				uni.showToast({
					title:'复制成功~',
					icon:'none'
				})
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data:value,
					success:function(){
						uni.showToast({
							title:'复制成功~',
							icon:'none'
						})
					}
				})
				// #endif
			},
			logistics(order_id){
				//查看物流
				uni.navigateTo({
					url:"/exchange/logistics?order_id="+order_id+"&type=1"
				})
			},
			getAddress(item){
				//查看物流
				this.address = item.province+item.city+item.district+item.address;
				this.modalShow = true;
			},
			
		}
	};
</script>
<style>
	page {
		font-family: PingFang SC;
		background: #f6f6f6;
	}

	.orderItem {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 15rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.goodsBox{
		margin-top: 20rpx;
		display: flex;
		align-items: stretch;
		padding-top: 20rpx;
		border-top:0.5rpx solid #E4E7ED;
	}
	.goods_img{
		width: 180rpx;
		height: 180rpx;
		margin-right: 10rpx;
	}
	.goods_img image{
		width: 100%;
		height: 100%;
	}
	.goods_info{
		width: 500rpx;
	}
	.goods_info view{
		margin-top: 10rpx;
	}
	.goods_title{
		font-size: 30rpx;
	}
	.goods_norms{
		font-size: 26rpx;
		color: #909399;
	}

	.price_box{
		display: flex;
		align-items: flex-end;
		margin-bottom: 10rpx;
		height: 50rpx;
	}

	/* .goods_img {
		position: absolute;
		width: 180rpx;
		height: 180rpx;
		overflow: hidden;
		left: 15rpx;
		top: 15rpx;
	}

	.goods_img image {
		width: 100%;
		height: 100%;
	}

	.orderItem .goods_info {
		margin-left: 200rpx;
		height: 178rpx
	} */

	.hd_title {
		font-size: 32rpx;
		line-height: 40rpx;
		height: 40rpx;
		overflow: hidden;
		color: #222
	}

	.order_price {
		width: 100%;
		line-height: 40rpx;
		padding: 10rpx 0;
		position: relative;
	}

	.order_price .hd_price {
		font-size: 28rpx;
		/*color: #CE4032;*/
		line-height: 40rpx;
	}
	
	.order_price .num{
		float: right;
		color: #999;
		font-size: 26rpx;
		margin-right: 20rpx;
	}

	.order_price .num1{
		float: right;
		font-size: 26rpx;
		margin-right: 20rpx;
	}

	.create-time {
		font-size: 24rpx;
		line-height: 28rpx;
		color: #999;
	}
	.btn_part{
		margin-right: 20rpx;
		text-align: right;
	}

	.footer{
		border-top:0.5rpx solid #E4E7ED;
		padding-top: 10rpx;
		margin-top: 10rpx;
	}
	.footer_info{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 25rpx;
		color: #909399;
		margin-bottom: 10rpx;
	}
	.footer_info view{
		margin-left: 10rpx;
	}
	
	.slot-content{
		padding: 20rpx 40rpx;
	}
	.payTime{
		padding: 0 40rpx;
		color: #909399;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}
	.modelPrice{
		color: #FA3534;
		font-size: 50rpx;
		font-weight: 650;
		padding: 0 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.copy{
		font-size: 24rpx;
		color: #888;
		background-color: #eee;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		margin-left: 30rpx;
		display: inline-block;
	}
	.u-radio{text-align: right;float:right !important}
	.modelContent{
		padding: 40rpx;
	}
	.accountData{
		padding: 15rpx 0 15px 200rpx;position: relative;
	}
	.accountData text{position: absolute;left:0;top:15px;display: inline-block;width:190rpx;text-align: right;}
	.accountData .u-input{border-bottom:0.5rpx solid #222;}
	.accountData .u-input input{min-width:260rpx}
	.bottomline{
		height: 1rpx;
	}
</style>
